<%@ include file="/common.jsp" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <!-- 引入所需的CSS和JS库 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-5">
    <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#addEmployeeModal">添加员工</button>

    <table class="table">
        <thead>
        <tr>
            <th>编号</th>
            <th>公司编号</th>
            <th>邮箱</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>电话号码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="employeeTableBody">
        <!-- 表格内容将动态填充 -->
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="d-flex justify-content-between">
        <button class="btn btn-secondary" id="prevPageBtn">&lt; 上一页</button>
        <button class="btn btn-secondary" id="nextPageBtn">下一页 &gt;</button>
    </div>
</div>

<!-- 添加员工模态框 -->
<div class="modal fade" id="addEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="addEmployeeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEmployeeModalLabel">添加员工</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 添加员工表单 -->
                <form id="addEmployeeForm">
                    <div class="form-group">
                        <label for="companyID">公司编号</label>
                        <select class="form-control" id="companyID" name="companyID">
                            <!-- 下拉框选项将动态填充在此处 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="employeeEmail">邮箱</label>
                        <input type="email" class="form-control" id="employeeEmail" name="employeeEmail">
                    </div>
                    <div class="form-group">
                        <label for="employeeName">姓名</label>
                        <input type="text" class="form-control" id="employeeName" name="employeeName">
                    </div>
                    <div class="form-group">
                        <label for="employeeAge">年龄</label>
                        <input type="text" class="form-control" id="employeeAge" name="employeeAge">
                    </div>
                    <div class="form-group">
                        <label for="employeeGender">性别</label>
                        <select class="form-control" id="employeeGender" name="employeeGender">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="employeePhoneNumber">电话号码</label>
                        <input type="text" class="form-control" id="employeePhoneNumber" name="employeePhoneNumber">
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑员工模态框 -->
<div class="modal fade" id="editEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="editEmployeeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editEmployeeModalLabel">编辑员工</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑员工表单 -->
                <form id="editEmployeeForm">
                    <input type="hidden" id="editIdNumber" name="idNumber">
                    <div class="form-group">
                        <label for="editCompanyID">公司编号</label>
                        <select class="form-control" id="editCompanyID" name="companyID">
                            <!-- 下拉框选项将动态填充在此处 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editEmployeeEmail">邮箱</label>
                        <input type="email" class="form-control" id="editEmployeeEmail" name="employeeEmail">
                    </div>
                    <div class="form-group">
                        <label for="editEmployeeName">姓名</label>
                        <input type="text" class="form-control" id="editEmployeeName" name="employeeName">
                    </div>
                    <div class="form-group">
                        <label for="editEmployeeAge">年龄</label>
                        <input type="text" class="form-control" id="editEmployeeAge" name="employeeAge">
                    </div>
                    <div class="form-group">
                        <label for="editEmployeeGender">性别</label>
                        <select class="form-control" id="editEmployeeGender" name="employeeGender">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editEmployeePhoneNumber">电话号码</label>
                        <input type="text" class="form-control" id="editEmployeePhoneNumber" name="employeePhoneNumber">
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 自定义JS -->
<script>
    // 加载公司编号下拉框选项
    function loadCompanyOptions(selectElementID, selectedCompanyID = null) {
        $.ajax({
            url: "${pageContext.request.contextPath}/company?operation=getAllCompanies",
            type: "GET",
            dataType: "json",
            success: function (data) {
                var selectElement = $("#" + selectElementID);
                selectElement.empty();
                $.each(data.data, function (index, company) {
                    var selected = company.companyID == selectedCompanyID ? "selected" : "";
                    selectElement.append(
                        "<option value='" + company.companyID + "' " + selected + ">" + company.companyID + "</option>"
                    );
                });
            },
            error: function () {
                alert("获取公司列表时出错！");
            }
        });
    }

    // 加载员工数据的函数
    function loadEmployeeData(start, pageSize) {
        $.ajax({
            url: "${pageContext.request.contextPath}/employee?operation=getEmployeesByPage&start=" + start + "&pageSize=" + pageSize,
            type: "GET",
            dataType: "json",
            success: function (data) {
                // 清空表格内容
                $("#employeeTableBody").empty();
                // 填充表格数据
                $.each(data.data, function (index, employee) {
                    $("#employeeTableBody").append(
                        "<tr data-id='" + employee.idNumber + "'>" +
                        "<td>" + employee.idNumber + "</td>" +
                        "<td>" + employee.companyID + "</td>" +
                        "<td>" + employee.employeeEmail + "</td>" +
                        "<td>" + employee.employeeName + "</td>" +
                        "<td>" + employee.employeeAge + "</td>" +
                        "<td>" + employee.employeeGender + "</td>" +
                        "<td>" + employee.employeePhoneNumber + "</td>" +
                        "<td>" +
                        "<button class='btn btn-info btn-sm' onclick='editEmployee(" + employee.idNumber + ")'>编辑</button>" +
                        "<button class='btn btn-danger btn-sm ml-1' onclick='deleteEmployee(" + employee.idNumber + ")'>删除</button>" +
                        "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function () {
                alert("获取数据时出错！");
            }
        });
    }

    // 提交添加员工表单的函数
    $("#addEmployeeForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/employee?operation=addEmployee",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 添加成功后重新加载数据
                loadEmployeeData(1, 5); // 添加后重新加载第一页数据
                // 重置表单并关闭模态框
                $("#addEmployeeForm")[0].reset();
                $("#addEmployeeModal").modal("hide");
                $('#addEmployeeModal').on('hidden.bs.modal', function () {
                    $('.modal-backdrop').remove();
                });
                // 显示成功信息
                alert("员工添加成功！");
            },
            error: function () {
                alert("添加员工时出错！");
            }
        });
    });

    // 填充编辑员工模态框数据的函数
    function populateEditModal(idNumber) {
        var employeeRow = $("table tbody").find("tr[data-id='" + idNumber + "']");
        var companyID = employeeRow.find("td:eq(1)").text();
        var employeeEmail = employeeRow.find("td:eq(2)").text();
        var employeeName = employeeRow.find("td:eq(3)").text();
        var employeeAge = employeeRow.find("td:eq(4)").text();
        var employeeGender = employeeRow.find("td:eq(5)").text();
        var employeePhoneNumber = employeeRow.find("td:eq(6)").text();

        // 填充表单字段
        $("#editIdNumber").val(idNumber);
        $("#editCompanyID").val(companyID);
        $("#editEmployeeEmail").val(employeeEmail);
        $("#editEmployeeName").val(employeeName);
        $("#editEmployeeAge").val(employeeAge);
        $("#editEmployeeGender").val(employeeGender);
        $("#editEmployeePhoneNumber").val(employeePhoneNumber);
    }

    // 提交编辑员工表单的函数
    $("#editEmployeeForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/employee?operation=updateEmployee",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 更新成功后重新加载数据
                loadEmployeeData(1, 5); // 更新后重新加载第一页数据
                // 关闭模态框
                $("#editEmployeeModal").modal("hide");
                // 显示成功信息
                alert("员工更新成功！");
            },
            error: function () {
                alert("更新员工时出错！");
            }
        });
    });

    // 处理编辑按钮点击的函数
    function editEmployee(idNumber) {
        populateEditModal(idNumber);
        $("#editEmployeeModal").modal("show");
    }

    // 删除员工的函数
    function deleteEmployee(idNumber) {
        if (confirm("确定要删除这个员工吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/employee?operation=deleteEmployee",
                type: "POST",
                data: { idNumber: idNumber },
                dataType: "json",
                success: function (data) {
                    // 删除成功后重新加载数据
                    loadEmployeeData(1, 5); // 删除后重新加载第一页数据
                    // 显示成功信息
                    alert("员工删除成功！");
                },
                error: function () {
                    alert("删除员工时出错！");
                }
            });
        }
    }

    // 处理分页的函数
    $("#prevPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#prevPageBtn").data("currentPage"));
        if (currentPage > 1) {
            // 加载上一页数据
            loadEmployeeData(currentPage - 1, 5); // 假设每页5条数据
            $("#prevPageBtn").data("currentPage", currentPage - 1); // 更新当前页码
            $("#nextPageBtn").data("currentPage", currentPage - 1); // 更新下一页按钮的当前页码
        }
    });

    $("#nextPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#nextPageBtn").data("currentPage"));
        // 加载下一页数据
        loadEmployeeData(currentPage + 1, 5); // 假设每页5条数据
        $("#prevPageBtn").data("currentPage", currentPage + 1); // 更新上一页按钮的当前页码
        $("#nextPageBtn").data("currentPage", currentPage + 1); // 更新当前页码
    });

    $(document).ready(function () {
        // 页面加载时加载第一页员工数据
        loadEmployeeData(1, 5); // 假设每页5条数据
        // 设置分页按钮的初始页码
        $("#prevPageBtn").data("currentPage", 1);
        $("#nextPageBtn").data("currentPage", 1);

        // 页面加载时加载公司编号下拉框选项
        loadCompanyOptions("companyID");
        // 编辑员工模态框显示时加载公司编号下拉框选项并自动回填
        $('#editEmployeeModal').on('show.bs.modal', function (e) {
            var idNumber = $("#editIdNumber").val();
            loadCompanyOptions("editCompanyID", $("#editCompanyID").val());
        });
    });

    // 手动移除模态框隐藏时的背景遮罩，防止黑色阴影
    $('#addEmployeeModal, #editEmployeeModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
    });
</script>
</body>
</html>
